import React, {ReactNode, useEffect, useState} from "react";
import {Button, Drawer, Flex, Input, Popconfirm, Select} from "antd";
import FileBucketApi, {FbInfo} from "@/api/web/FileBucketApi.ts";

import {createStyles} from "antd-style"
import {FbTypes} from "@/pages/FbPage/BucketViewer";
import {formatTime} from "@/utils/Util.ts";
import UserApi, {UserDto} from "@/api/web/UserApi.ts";
import {useNavigate} from "react-router";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            display: flex;
            flex-direction: column;
            gap: 8px;
            h3 {
                margin: 10px 0;
            }
            .title {
                text-wrap: nowrap;
            }
        `,
        bottomInfo: css`
            border: 1px solid ${token.colorBorder};
            border-radius: ${token.borderRadiusLG}px;
            padding: 10px;
            p {
                font-size: 15px;
                line-height: 20px;
            }
        `,
    }
})

interface Props {
    open: boolean
    onClose: () => void
    fbInfo: FbInfo
    rerenderTrigger?: () => void
}

const FileBucketInfoModal: React.FC<Props> = ({open, onClose, fbInfo, rerenderTrigger}) => {
    const [name, setName] = useState(fbInfo.name)
    const styles = useStyles().styles
    const [user, setUser] = useState<UserDto | null>(null)
    const navigator = useNavigate()

    useEffect(() => {
        UserApi.getUserById(fbInfo.creatorId).then(res => {
            setUser(res.data)
        })
    }, []);

    return (
        <Drawer
            open={open}
            onClose={onClose}
            placement="left"
            classNames={{
                body: styles.container,
            }}
            title="容器信息设置"
        >
            <FbInfoModalItem label="容器名称">
                <Input
                    value={name}
                    onInput={evt => {
                        if (evt.target instanceof HTMLInputElement) {
                            setName(evt.target.value)
                        }
                    }}
                    onBlur={() => {
                        FileBucketApi.updateFbInfo({...fbInfo, name}).then(res => {
                            if (res.status) {
                                window.messageApi.success("修改成功").then()
                                rerenderTrigger && rerenderTrigger()
                            }
                        })
                    }}
                />
            </FbInfoModalItem>
            <FbInfoModalItem label="容器类型">
                <Select
                    style={{minWidth: "150px"}}
                    options={FbTypes.map(item => ({
                        label: item.label,
                        value: item.value,
                    }))}
                    defaultValue={fbInfo.type}
                    onChange={(value) => {
                        FileBucketApi.updateFbInfo({...fbInfo, type: value}).then(res => {
                            rerenderTrigger && rerenderTrigger()
                        })
                    }}
                />
            </FbInfoModalItem>
            <FbInfoModalItem label="删除当前容器">
                <Popconfirm title="确认删除"
                            onConfirm={() => {
                                FileBucketApi.deleteFileBucket(fbInfo.id).then(res => {
                                    if (res.status) {
                                        window.messageApi.success("删除成功").then()
                                        navigator("/home/content")
                                    }
                                })
                            }}
                >
                    <Button
                        type="primary"
                        danger
                    >删除</Button>
                </Popconfirm>
            </FbInfoModalItem>
            <div className={styles.bottomInfo}>
                <p>创建人：{user ? user.username : fbInfo.creatorId}</p>
                <p>创建时间：{formatTime(new Date(fbInfo.createTime))}</p>
                <p>最近更新时间：{formatTime(new Date(fbInfo.updateTime))}</p>
            </div>
        </Drawer>
    )
}

export default FileBucketInfoModal

interface DrawerItemProps {
    label: string
    children: ReactNode
}

const FbInfoModalItem: React.FC<DrawerItemProps> = ({label, children}) => {
    return (
        <Flex
            align="center"
            gap={8}
        >
            <p className="title">{label}</p>
            {children}
        </Flex>
    )
}
